import React, {Component} from 'react'

export default class Footer extends Component {

  //全选  反选
  handleCheckAll = (event) => this.props.checkAllTodo(event.target.checked)

  //清空已经完成的
  handleClearAllDone = () => this.props.clearAllDone()

  render() {

    const {todos} = this.props;

    //已完成个数
    const doneCount = todos.reduce((prev, todo) => prev + (todo.done ? 1 : 0), 0);

    //总数
    const total = todos.length;

    return <div>
      <input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total > 0}/>
      已完成 {doneCount} / 全部 {total}
      <button onClick={this.handleClearAllDone} className="button button-little bg-sub" style={{float: 'right'}}>清空已完成事件
      </button>
    </div>
  }

}